<script setup>
import HeroBanner from '../components/HeroBanner.vue'
import { ref } from 'vue'
import { ArrowLeft, ArrowRight, Check, Timer, Promotion, TrendCharts, Medal } from '@element-plus/icons-vue'

// 递归加载 assets/images 下的所有图片，兼容大小写扩展名
const modules = import.meta.glob('../assets/images/**/*.{jpg,jpeg,png,webp,JPG,JPEG,PNG,WEBP}', { eager: true })
let allImages = Object.entries(modules)
  .sort(([a], [b]) => a.localeCompare(b))
  .map(([, mod]) => mod.default)

// 找不到图片时使用占位背景，避免空白
if (allImages.length === 0) {
  allImages = ['/bg-warm.svg']
}

// 当前索引
const currentIndex = ref(0)
const total = allImages.length

const prevImage = () => {
  currentIndex.value = (currentIndex.value - 1 + total) % total
}
const nextImage = () => {
  currentIndex.value = (currentIndex.value + 1) % total
}
</script>

<template>
  <div>
    <HeroBanner />

    <section class="section">
      <div class="container" v-reveal>
        <div class="hero-slider">
          <img
            v-if="total > 0"
            :src="allImages[currentIndex]"
            :alt="`图片 ${currentIndex+1}`"
          />
          <el-button class="nav left" :icon="ArrowLeft" circle @click="prevImage" />
          <el-button class="nav right" :icon="ArrowRight" circle @click="nextImage" />
        </div>
      </div>
    </section>

    <section class="section" style="background: var(--brand-warm-2)">
      <div class="container" v-reveal>
        <el-row :gutter="24" align="middle">
          <el-col :xs="24" :md="12">
            <h2 class="mission-title">《观后感》</h2>
            <p class="mission-sub"></p>
            <ul class="mission-list">
              <li>
                勇气是突破困境的利刃
              </li>
              <li>
                行动比空想更接近成功
              </li>
              <li>
                保持初心，方得始终
              </li>
              <li>
                英雄不问出处，内向者也能发光
              </li>
              <li>
                模仿是成长的起点，找到自我才是终点
              </li>
            </ul>
          </el-col>
          <el-col :xs="24" :md="12">
            <div id="wordcloud" style="height: 400px;"></div>
          </el-col>
        </el-row>
      </div>
    </section>
  </div>
</template>

<script>
import { wordCloudChart } from '../components/echarts.js'
import { onMounted, nextTick } from 'vue'

onMounted(() => {
  nextTick(() => {
    wordCloudChart('wordcloud')
  })
})
</script>

<style scoped>
.card-header { color: #a8643a; font-weight: 600 }

.container {
  padding: 20px 0;
  text-align: center;
}

/* 大图轮播 */
.hero-slider {
  position: relative;
  height: 520px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(255, 122, 69, 0.18);
  border: 1px solid rgba(255, 153, 102, 0.25);
}
.hero-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-slider .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
}
.hero-slider .nav.left { left: 12px }
.hero-slider .nav.right { right: 12px }

/* 使命区样式 */
.mission-title { margin: 0 0 8px; color: #a64b10 }
.mission-sub { color: #7a5b4b; margin: 0 0 12px }
.mission-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px }
.mission-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255,255,255,0.7); border-radius: 10px; border: 1px solid rgba(255, 153, 102, 0.25) }
.mission-list :deep(.el-icon) { color: var(--el-color-primary) }

.stats-card { text-align: left; }
.stat-item { text-align: center; padding: 12px 6px; background: rgba(255,255,255,0.7); border: 1px solid rgba(255,153,102,0.25); border-radius: 10px }
.stat-icon { font-size: 20px; color: var(--el-color-primary); }
.stat-value { font-size: 28px; font-weight: 700; color: #a64b10; line-height: 1.2 }
.stat-label { font-size: 12px; color: #7a5b4b }
.stats-cta { margin-top: 12px; display: flex; gap: 10px; justify-content: flex-end }

/* 移除之前的轮播图指示器样式 */
</style>